import React, { Component } from 'react';
import '../styles/login.scss'
import { Input, Button,Toast } from 'antd-mobile'
import {logon_register} from '../apis/api'
class logon extends Component {
    state = {
        phone: '',
        pass:'',
    }
    valueChange(e,type) {
        // console.log('aa',e,type);
        this.setState({
            [type]:e.trim()
        })
    }
    valueBlur(type) {
        // console.log('失去焦点了');
        // console.log(this.state[type])
        let value = this.state[type];
        if (!value) {
            alert("必填字段，不可为空");  
            return false;
        }
        if (type === 'phone') {
            // 校验账号
            if(!(/^1[3456789]\d{9}$/.test(value))){ 
                alert("手机号码有误，请重填");  
                return false; 
            } else {
                return true;
            }
        } else if (type === 'pass') {
            // 校验密码
            if (value.length<4) {
                alert('密码不足四位，肯定不对')
                return false
            } else {
                return true;
            }
        }
    }
    toLogin = () => {
        this.props.history.push('/login')
    }
    register = (phone,pass) => {
        let phoneFlag = this.valueBlur('phone');
        let passFlag = this.valueBlur('pass');
        // console.log(phoneFlag,passFlag);
        if (!phoneFlag || !passFlag) {
            return
        }
        logon_register({phone,pass}).then((res) => {
            console.log(res);
           
            // console.log(i);
            Toast.show({
                position: 'top',
                icon: 'success',
                content:res.data.msg,
              })
        })
    }
    render() {
        return (
            <div className='login'>
                <Input className='name' type='number'  value={this.state.phone} onBlur={()=>{this.valueBlur('phone')}} onChange={(e)=>{this.valueChange(e,'phone')}} placeholder='请输入账户'/>
                <Input className='pass' type='password' value={this.state.pass} onBlur={()=>{this.valueBlur('pass')}} onChange={(e)=>{this.valueChange(e,'pass')}} placeholder='请输入密码' />
                <Button className='login' block color='primary' size='large' onClick={()=>{this.register(this.state.phone,this.state.pass)}}>注 册</Button>
                <Button className='logon' color='primary' fill='none' onClick={this.toLogin}>登 录</Button>
            </div>
        );
    }
}

export default logon;